<template>
  <div class="home-top">
    <h3>人气推荐</h3>
    <div class="content">
      <van-card
        v-for="item in goodsList"
        :key="item.id"
        :tag="item.tag"
        :price="item.retail_price"
        :origin-price="item.origin_price"
        :desc="item.goods_brief"
        :title="item.name"
        :thumb="item.list_pic_url"
      >
      </van-card>
    </div>
  </div>
</template>

<script setup>
const goodsList = [
  {
    retail_price: '2488.00',
    name: '勒文吉恭达斯干红葡萄酒',
    goods_brief: '红酒-宝石红色、石榴红色',
    list_pic_url: '/images/2.1.jpg',
    tag: 'TOP1'
  },
  {
    retail_price: '1288.00',
    origin_price: '1298.00',
    name: '佳丽昂珍藏干红葡萄酒',
    goods_brief: '果香柔和酒体丰腴',
    list_pic_url: '/images/2.2.jpg',
    tag: 'TOP2'
  },
  {
    retail_price: '998.00',
    origin_price: '968.00',
    name: '佳丽昂干红葡萄酒限量版',
    goods_brief: '草莓、蓝莓、麝香和迷迭香等',
    list_pic_url: '/images/2.3.jpg',
    tag: 'TOP3'
  },
  {
    retail_price: '1299.00',
    origin_price: '1225.00',
    name: '佳丽昂干红葡萄酒',
    goods_brief: '酒体平衡、紧实',
    list_pic_url: '/images/2.4.jpg',
    tag: 'TOP4'
  },
  {
    retail_price: '589.00',
    origin_price: '529.00',
    name: '法国列级名庄 狄士美古堡干红葡萄酒2013',
    goods_brief: '唇齿间的这种美妙触感流连忘返',
    list_pic_url: '/images/2.5.jpg',
    tag: 'TOP5'
  }
];
</script>

<style lang="less" scoped>
.home-top {
  h3 {
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    margin: 0.5rem 0;
  }
 .content {
    --van-tag-primary-color: #FF8000;
    --van-card-font-size: 16px;
    --van-card-background: #f9f9f9;
    background: var(--van-card-background);
    :deep(.van-card) {
      margin-top: 0;
     .van-card title {
        padding: 10px 0 5px;
      }
     .van-card price-currency {
        font-size: var(--van-card-font-size);
      }
    }
    &::after {
      content: '';
      display: block;
      height: 3rem;
    }
  }
}
</style>